<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>魔幻卡牌对战</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.3.2/dist/pixi.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Exo 2', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            position: relative;
            touch-action: none;
        }
        
        #particles-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        .game-container {
            position: relative;
            z-index: 2;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
        
        .enemy-area {
            height: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .player-area {
            height: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .battlefield {
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
            position: relative;
        }
        
        .hand-area {
            height: 20%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 10px;
        }
        
        .health-bar {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffd700;
            border-radius: 20px;
            padding: 8px 20px;
            color: #fff;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            margin-bottom: 10px;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }
        
        .card {
            width: 80px;
            height: 120px;
            margin: 0 5px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }
        
        .card:hover {
            transform: translateY(-10px) scale(1.1);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            backface-visibility: hidden;
            border: 2px solid #ffd700;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            overflow: hidden;
        }
        
        .card-back {
            background: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
            background-image: url('resources/card-back.png');
            background-size: cover;
            background-position: center;
        }
        
        .card-front {
            transform: rotateY(180deg);
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 5px;
        }
        
        .card-image {
            width: 100%;
            height: 60%;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            margin-bottom: 5px;
        }
        
        .card-stats {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 12px;
            font-weight: 600;
            color: #ffd700;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        }
        
        .card-name {
            font-size: 10px;
            color: #fff;
            text-align: center;
            margin-top: 2px;
            font-weight: 600;
        }
        
        .flipped {
            transform: rotateY(180deg);
        }
        
        .dragging {
            opacity: 0.8;
            transform: translateY(-20px) scale(1.2) !important;
            z-index: 1000;
        }
        
        .drop-zone {
            border: 2px dashed #ffd700;
            border-radius: 15px;
            background: rgba(255, 215, 0, 0.1);
            min-height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        
        .drop-zone.drag-over {
            background: rgba(255, 215, 0, 0.2);
            border-color: #fff;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        }
        
        .game-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
        }
        
        .control-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid #ffd700;
            border-radius: 25px;
            padding: 12px 24px;
            color: #fff;
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(102, 126, 234, 0.4);
        }
        
        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 25px rgba(102, 126, 234, 0.6);
        }
        
        .control-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        .turn-indicator {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #ffd700;
            border-radius: 20px;
            padding: 10px 30px;
            color: #fff;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 18px;
            z-index: 10;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }
        
        .game-over-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .game-over-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 3px solid #ffd700;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
        }
        
        .game-over-title {
            font-family: 'Orbitron', monospace;
            font-size: 36px;
            font-weight: 900;
            color: #ffd700;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        
        .restart-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            border: none;
            border-radius: 25px;
            padding: 15px 30px;
            color: #1a1a2e;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }
        
        .restart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
        }
        
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
            50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
        }
        
        .glowing {
            animation: glow 2s infinite;
        }
        
        @keyframes damage {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }
        
        .damage-animation {
            animation: damage 0.5s ease-in-out;
        }
        
        @media (max-width: 480px) {
            .card {
                width: 70px;
                height: 105px;
                margin: 0 3px;
            }
            
            .card-stats {
                font-size: 10px;
            }
            
            .card-name {
                font-size: 8px;
            }
        }
    </style>
</head>
<body>
    <canvas id="particles-canvas"></canvas>
    
    <div class="game-container">
        <div class="turn-indicator" id="turnIndicator">玩家回合</div>
        
        <div class="enemy-area">
            <div class="health-bar" id="enemyHealth">敌人血量: 30</div>
            <div class="battlefield" id="enemyBattlefield">
                <div class="drop-zone" id="enemyDropZone">
                    <span style="color: #ffd700; font-family: 'Orbitron', monospace;">敌人战场</span>
                </div>
            </div>
        </div>
        
        <div class="battlefield" id="playerBattlefield">
            <div class="drop-zone" id="playerDropZone">
                <span style="color: #ffd700; font-family: 'Orbitron', monospace;">你的战场</span>
            </div>
        </div>
        
        <div class="player-area">
            <div class="battlefield hand-area" id="handArea">
                <!-- 手牌将在这里动态生成 -->
            </div>
            <div class="health-bar" id="playerHealth">玩家血量: 30</div>
        </div>
        
        <div class="game-controls">
            <button class="control-btn" id="endTurnBtn">结束回合</button>
            <button class="control-btn" id="restartBtn">重新开始</button>
        </div>
    </div>
    
    <div class="game-over-modal" id="gameOverModal">
        <div class="game-over-content">
            <div class="game-over-title" id="gameOverTitle">游戏结束</div>
            <button class="restart-btn" onclick="game.restart()">重新开始</button>
        </div>
    </div>
    
    <script src="main.js"></script>
</body>
</html>